<template>
  <div id="myChart" :style="{ width: '100%', height: '300px' }"></div>
</template>
 
<script setup>
import { EcartsA } from "@/api/indexHome";

import * as echarts from "echarts";
import elementResizeDetectorMaker from "element-resize-detector";
const erd = elementResizeDetectorMaker();
let myChart;
const initMyChart = () => {
  myChart = echarts.init(document.getElementById("myChart"));
};

import { reactive, getCurrentInstance, onMounted, inject, computed } from "vue";

const parentDataA = inject("parentDataA");

/// 声明定义一下echart
let echart = echarts;
watch(
  () => parentDataA.value,
  (newValue) => {
    EcartsAPOT(parentDataA.value);
  },
  { deep: true }
);
onMounted(async () => {
  await nextTick();
  initMyChart();
  EcartsAPOT(parentDataA.value);
  erd.listenTo(document.getElementById("myChart"), function () {
    myChart.resize();
  });
});
function EcartsAPOT(obj) {
  EcartsA({
    state: obj.state,
    id: obj.shopId,
  }).then((res) => {
    if (obj.state == 0) {
      let dayMoney = res.data.dayMoney;
      let days = [],
        expectedData = [],
        actualData = [];
      for (let i = 0; i < dayMoney.length; i++) {
        days.push(dayMoney[i].dateTime);
        expectedData.push(dayMoney[i].dayMoney);
        actualData.push(dayMoney[i].dayIncidentalMoney);
      }
      initChart(days, expectedData, actualData, obj.state);
    } else {
      let monthMoney = res.data.monthMoney;
      let days = [],
        expectedData = [],
        actualData = [];
      for (let i = 0; i < monthMoney.length; i++) {
        days.push(monthMoney[i].yearMonth);
        expectedData.push(monthMoney[i].monthMoney);
        actualData.push(monthMoney[i].monthIncidentalMoney);
      }
      initChart(days, expectedData, actualData, obj.state);
    }
  });
}
onUnmounted(() => {
  erd.uninstall(document.getElementById("myChart"));
});
const day = new Date().getDate();
// 基础配置一下Echarts
function initChart(days, expectedData, actualData, dayState) {
  let statime = 0;
  let tdats = 0;
  if (dayState == 0) {
    if (day > 7) {
      statime = day - 7;
      tdats = day;
    } else {
      tdats = day;
    }
    if (day == days.length) {
    } else {
      expectedData.splice(day, expectedData.length);
      actualData.splice(day, actualData.length);
      days.splice(day, days.length);
    }
  } else if (dayState == 1) {
    statime = days.length - 5;
    tdats = days.length;
  }

  // 把配置和数据放这里
  myChart.setOption({
    legend: {
      data: ["销售总额(元)", "支出总额(元)"],
    },
    dataZoom: [
      {
        type: "inside", // 内嵌入图标中
        startValue: statime, // 用绝对值的方式定义了窗口数据默认展示的数据开始范围
        endValue: tdats, // 用绝对值的方式定义了窗口数据默认展示的数据终止范围
        filterMode: "filter",
        xAxisIndex: [0],
      },
    ],
    xAxis: {
      type: "category",
      data: days,
    },
    tooltip: {
      trigger: "axis",
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "销售总额(元)",
        type: "line",
        data: expectedData,
        animationDuration: 2800,
        animationEasing: "cubicInOut",
      },
      {
        name: "支出总额(元)",
        smooth: true,
        type: "line",
        data: actualData,
        animationDuration: 2800,
        animationEasing: "cubicInOut",
      },
    ],
  });
}
</script>